<template>
  <div class="collect-container">
    <!-- 搜索表单 -->
    <div class="search-form" style="padding: 15px; border-radius: 4px;" v-if="false">
      <el-form :model="searchForm" :inline="true" size="small">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="数据来源">
              <el-select v-model="searchForm.dataSource" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管理机构">
              <el-select v-model="searchForm.manageOrg" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发生机构">
              <el-select v-model="searchForm.occurrenceOrg" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="当前催收员">
              <el-input v-model="searchForm.currentCollector" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="催收状态">
              <el-select v-model="searchForm.collectStatus" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户姓名">
              <el-input v-model="searchForm.customerName" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="合同号">
              <el-input v-model="searchForm.contractNo" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="催收阶段">
              <el-select v-model="searchForm.collectStage" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否客户">
              <el-radio-group v-model="searchForm.isCustomer">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否公诉">
              <el-radio-group v-model="searchForm.isLitigation">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="逾期阶段">
              <el-select v-model="searchForm.overdueStage" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="原贷金额">
              <el-select v-model="searchForm.originalLoanAmount" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现贷金额">
              <el-select v-model="searchForm.currentLoanAmount" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经销商名称">
              <el-input v-model="searchForm.dealerName" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否可联">
              <el-select v-model="searchForm.isContactable" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否履行还款">
              <el-select v-model="searchForm.isRepaying" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经销商类型">
              <el-select v-model="searchForm.dealerType" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="逾期天数">
              <el-input-number v-model="searchForm.overdueDaysMin" controls-position="right" :min="0" class="small-input-number"></el-input-number>
              <span style="margin: 0 5px;">-</span>
              <el-input-number v-model="searchForm.overdueDaysMax" controls-position="right" :min="0" class="small-input-number"></el-input-number>
            </el-form-item>
            <el-form-item label="逾期金额">
              <el-input-number v-model="searchForm.overdueAmountMin" controls-position="right" :min="0" class="small-input-number"></el-input-number>
              <span style="margin: 0 5px;">-</span>
              <el-input-number v-model="searchForm.overdueAmountMax" controls-position="right" :min="0" class="small-input-number"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24" style="text-align: center; margin-top: 10px;">
            <el-button type="success" size="small" @click="handleSearch">查询</el-button>
            <el-button size="small" @click="handleReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div style="margin: 15px 0; color: #666;">
      <span>换个点进去页面做完关闭网页，再回到这个主页面选择下一个案子接着做</span>
    </div>

    <!-- 任务列表 -->
    <div class="task-list">
      <h3>任务列表</h3>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        v-loading="loading"
        :header-cell-style="{ backgroundColor: '#8bc34a', color: '#fff' }"
      >
        <el-table-column prop="contractNo" label="合同号" width="180"></el-table-column>
        <el-table-column label="任务号" width="180">
          <template slot-scope="scope">
            <el-link type="primary" @click="goToTaskDetail(scope.row.taskNo)">{{ scope.row.taskNo }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="originalOrg" label="原贷机构" width="120"></el-table-column>
        <el-table-column prop="occurrenceOrg" label="发生机构" width="120"></el-table-column>
        <el-table-column prop="manageOrg" label="管辖机构" width="120"></el-table-column>
        <el-table-column prop="customerName" label="客户姓名" width="120"></el-table-column>
        <el-table-column prop="entryDate" label="入案日期" width="180"></el-table-column>
        <el-table-column prop="collectStatus" label="催收状态" width="120"></el-table-column>
        <el-table-column prop="collectMethod" label="催收方式" width="180"></el-table-column>
        <el-table-column prop="collectResult" label="催收结果" width="120"></el-table-column>
        <el-table-column prop="collectProgress" label="催收进度" width="120"></el-table-column>
      </el-table>

      <div class="pagination" style="margin-top: 15px; text-align: right;">
        <span>共 {{ total }} 条</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <span>到第</span>
        <el-input v-model="jumpPage" size="mini" style="width: 50px; margin: 0 5px;"></el-input>
        <span>页</span>
        <el-button size="mini" @click="handleJumpPage">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CollectSystem',
  data() {
    return {
      searchForm: {
        dataSource: '',
        manageOrg: '',
        occurrenceOrg: '',
        currentCollector: '',
        collectStatus: '',
        customerName: '',
        contractNo: '',
        collectStage: '',
        isCustomer: 1,
        isLitigation: 1,
        overdueStage: '',
        originalLoanAmount: '',
        currentLoanAmount: '',
        dealerName: '',
        isContactable: '',
        isRepaying: '',
        dealerType: '',
        overdueDaysMin: '',
        overdueDaysMax: '',
        overdueAmountMin: '',
        overdueAmountMax: ''
      },
      tableData: [],
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      jumpPage: 1
    };
  },
  mounted() {
    this.fetchCollectData();
  },
  methods: {
    // 获取催收数据
    async fetchCollectData() {
      this.loading = true;
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          ...this.searchForm
        };
        
        const response = await this.$http.post('https://m1.apifoxmock.com/m1/1149415-2096860-default/luojie/cuishui', {
          params
        });
        
        // 根据实际API返回结构调整数据处理
        if (response.data) {
          // 如果API返回的数据结构是 { code: 200, data: { list: [], total: 0 } }
          if (response.data.code === 200 && response.data.data) {
            console.log('请求数据-----------',response.data.data);
            
            this.tableData = response.data.data.list || response.data.data.results || [];
            this.total =  this.tableData.length;
          } 
          // 如果API直接返回数组
          else if (Array.isArray(response.data)) {
            this.tableData = response.data;
            this.total = response.data.length;
          }
          // 其他情况，尝试从不同字段获取数据
          else {
            this.tableData = response.data.list || response.data.results || response.data.data || [];
            this.total = response.data.total || response.data.count || this.tableData.length;
          }
        } else {
          this.$message.error('获取数据失败');
        }
      } catch (error) {
        console.error('获取催收数据失败:', error);
        this.$message.error('网络请求失败，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    
    // 查询
    handleSearch() {
      this.currentPage = 1;
      this.fetchCollectData();
    },
    
    // 重置
    handleReset() {
      this.searchForm = {
        dataSource: '',
        manageOrg: '',
        occurrenceOrg: '',
        currentCollector: '',
        collectStatus: '',
        customerName: '',
        contractNo: '',
        collectStage: '',
        isCustomer: 1,
        isLitigation: 1,
        overdueStage: '',
        originalLoanAmount: '',
        currentLoanAmount: '',
        dealerName: '',
        isContactable: '',
        isRepaying: '',
        dealerType: '',
        overdueDaysMin: '',
        overdueDaysMax: '',
        overdueAmountMin: '',
        overdueAmountMax: ''
      };
      this.currentPage = 1;
      this.fetchCollectData();
    },
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.fetchCollectData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchCollectData();
    },
    handleJumpPage() {
      if (this.jumpPage && this.jumpPage > 0 && this.jumpPage <= Math.ceil(this.total / this.pageSize)) {
        this.currentPage = parseInt(this.jumpPage);
        this.fetchCollectData();
      }
    },
    goToTaskDetail(taskNo) {
      this.$router.push({
        name: 'taskDetail',
        params: { taskId: taskNo }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.collect-container {
  padding: 15px;
}

.search-form {
  margin-bottom: 15px;
}

.el-form-item {
  margin-bottom: 10px;
}

.small-input-number {
  width: 100px;
}

.el-select {
  width: 100%;
}

.task-list {
  h3 {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
  }
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>